<template>
	<div class="person">
		<h2>我是Person组件</h2>
		<h3>上方组件的和为：{{sum}}</h3>
		<input @keyup.enter="addPerson" type="text" placeholder="输入人的名字">
		<ul>
			<li v-for="person in persons" :key="person.id">{{person.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import {nanoid} from 'nanoid'

	export default {
		name:'Person',
		methods: {
			addPerson(event){
				let {value} = event.target
				let person = {id:nanoid(),name:value}
				this.$store.dispatch('jiaRen',person)
				event.target.value = ''
			}
		},
		computed:{
			...mapState(['sum','persons'])
		}
	}
</script>

<style>
	.person{
		background-color: orange;
		padding: 30px;
	}
</style>